<template>
  <el-dialog
      :close-on-click-modal="false"
      v-model="dialogFormVisible"
      :title="title"
      width="640px"
      :before-close="handleClose"
      style="margin-top: 40px;"
  >
    <el-form
        v-loading="formLoading"
        ref="sysUserFormRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="demo-form"
        :size="formSize"
        status-icon
    >
      <el-form-item label="账号" prop="account" :label-width="100" required>
        <el-input v-model="form.account" autocomplete="off" maxlength="60"   placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item label="用户名" prop="username" :label-width="100" required>
        <el-input v-model="form.username" autocomplete="off" maxlength="60"   placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密码" v-if="!form.id" prop="password" :label-width="100" required>
        <el-input v-model="form.password" autocomplete="off" maxlength="60"   placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="头像" prop="avatar" :label-width="100" required >
        <!--  上传图片地址  -->
        <el-input v-model="form.avatar" autocomplete="off" maxlength="200"   placeholder="请上传图片"  :disabled="true" />
        <!--  上传图片  -->
        <local-upload dir="avatar" v-model="form.avatar" :picture="form.avatar"></local-upload>
      </el-form-item>
      <el-form-item label="手机号" prop="phone" :label-width="100" required>
        <el-input v-model="form.phone" autocomplete="off" maxlength="11"   placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email" :label-width="100" required>
        <el-input v-model="form.email"  autocomplete="off" maxlength="120"   placeholder="请输入邮箱"/>
      </el-form-item>
      <el-form-item label="冻结状态" prop="enable" :label-width="100" required>
        <el-radio-group v-model="form.enable">
          <el-radio :label="1">已冻结</el-radio>
          <el-radio :label="0">未冻结</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="删除状态" prop="isDeleted" :label-width="100" required>
        <el-radio-group v-model="form.isDeleted">
          <el-radio :label="1">已删除</el-radio>
          <el-radio :label="0">未删除</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="dialog-footer" style="text-align: center">
        <el-button class="kva-button" @click="handleClose" icon="Close" >取消</el-button>
        <el-button class="kva-button" type="primary" @click="handleSubmit" :loading="suLoading" icon="Check">{{ form.id ? "更新" : "保存"}}</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {GetById,SaveData,UpdateData} from "@/api/sysUser.js"
import {kvaMessage} from "@/utils/kvaMessage.js";
import debounce from "@/utils/debounce.js";
import LocalUpload from "@/components/upload/LocalUpload.vue";

// 定义控制打开弹窗的属性
const dialogFormVisible = ref(false)
// 定义打开弹窗的标题
const title = ref("")
// 定义打开弹窗时的加载属性
const formLoading = ref(false)
// 提交时候的加载属性
const suLoading = ref(false)
// 数据重新加载（刷新）
const emits = defineEmits("load")

// 定义用户提交时验证表单的属性
const sysUserFormRef = ref({})

// 定义添加的用户属性
let form = reactive({
  account: "",
  username: "",
  password: "",
  avatar: "",
  phone: "",
  email: "",
  enable: 0,
  isDeleted: 0
})

// 定义验证规则
const rules = reactive({
  "account": [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
  "username": [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  "password": [{ required: true, message: '请输入用户密码', trigger: 'blur' }],
  "avatar": [{ required: true, message: '请上传用户头像', trigger: 'blur' }],
  "phone": [{ required: true, message: '请输入用户手机号', trigger: 'blur' }],
  "email": [{type:"email", required: true, message: '请输入用户邮箱', trigger: 'blur' }],
})


// 打开弹窗的方法
const handleOpen = async(userId) => {
  // 打开弹窗的属性
  dialogFormVisible.value = true
  // 判断是否有用户Id，如果有就是编辑，如果没有就是添加
  if (userId){
    title.value = '编辑系统用户'
    // 开启加载的动画
    formLoading.value =  true
    // 调用根据用户ID查询的接口
    const resp = await GetById(userId)
    // 关闭加载的动画
    formLoading.value = false
    // 用户信息回填
    form = reactive(resp.data)
  }else{
    title.value = '添加系统用户'
    form.password = "123456"
  }
}

// 提交保存
const handleSubmit = () => {
  // 防抖，在有效时间内，只有最后一次执行
  debounce(()=>{
    // 表单校验
    sysUserFormRef.value.validate(async (valid, fields) => {
      if (valid) {
        // 防护用户连续点击
        suLoading.value = true
        form.id ? await  UpdateData(form): await SaveData(form)
        suLoading.value = false
        // 提示信息
        kvaMessage.notifySuccess(form.id ? "更新成功！" : "保存成功！")
        // 关闭弹窗
        handleClose()
        // 重新加载数据
        emits("load")
      }
    })
  },1000)
}


// 关闭弹窗的方法
const handleClose = () => {
  // 关闭弹窗的属性
  dialogFormVisible.value = false
  // 清空id
  delete form.id
  // 清空弹窗菜单数据
  sysUserFormRef.value.resetFields()
}

// 导出子组件
defineExpose({
  handleOpen
})

</script>

<style scoped lang="scss">

</style>
